<template><!--数据统计组件-->
  <div class="sales-board">
      <div class="sales-board-intro">
        <h2>数据统计</h2>
        <p>历史资料、科学实验、检验、统计等所获得的和用于科学研究、技术设计、查证、决策等的数值加以统计为解决方案做前期准备。</p>
      </div>
      <div class="sales-board-form">
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  产品类型：
              </div>
              <div class="sales-board-line-right">
                <v-chooser　:selections="buyTypes" 
                @on-change="onParamsChange('buyType',$event)"></v-chooser>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  适用地区：
              </div>
              <div class="sales-board-line-right">
                <v-selection :selections="districts" 
                @on-change="onParamsChange('buyRegion',$event)"></v-selection>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  有效时间：
              </div>
              <div class="sales-board-line-right">
                  半年
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  总价：
              </div>
              <div class="sales-board-line-right">
                  {{ price }} 元
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">&nbsp;</div>
              <div class="sales-board-line-right">
                  <div class="button">
                    立即购买
                  </div>
              </div>
          </div>
      </div>
      <div class="sales-board-des">
        <h2>产品说明</h2>
        <p>历史资料、科学实验、检验、统计等所获得的和用于科学研究、技术设计、查证、决策等的数值加以统计为解决方案做前期准备。</p>

        <table class="sales-board-table">
          <tbody>
              <tr class="ui-table-row">
                  <td class="col-first">
                      <div class="intro-pic">
                          <label>安全安保</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>办公文教</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>彩票</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>车辆物流</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>成人用品</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>出版传媒</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>电脑硬件</label>
                      </div>
                  </td>
              </tr>
              <tr class="ui-table-row">
                  <td class="col-first">
                      <div class="intro-pic">
                          <label>电子电工</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>房地产建筑装修</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>分类平台</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>服装鞋帽</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>箱包饰品</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>化工原料制品</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>机械设备</label>
                      </div>
                  </td>
              </tr>
              <tr class="ui-table-row">
                  <td class="col-first">
                      <div class="intro-pic">
                          <label>家庭日用品</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>家用电器</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>教育培训</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>节能环保</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>金融服务</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>礼品</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>旅游住宿</label>
                      </div>
                  </td>
              </tr>
              <tr class="ui-table-row">
                  <td class="col-first">
                      <div class="intro-pic">
                          <label>美容化妆</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>母婴护理</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>农林牧渔</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>软件</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>商务服务</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>生活服务</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>食品保健品</label>
                      </div>
                  </td>
              </tr>
              <tr class="ui-table-row">
                  <td class="col-first">
                      <div class="intro-pic">
                          <label>手机数码</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>通讯服务设备</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>网络服务</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>医疗服务</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>游戏</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>运动休闲娱乐</label>
                      </div>
                  </td>
                  <td>
                      <div class="intro-pic">
                          <label>招商加盟</label>
                      </div>
                  </td>
              </tr>
          </tbody>
      </table>
      </div>
      <my-dialog :is-show="isShowPayDialog" @on-close="hidePayDialog">
       <table class="buy-dialog-table">
         <tr>
           <th>购买产品</th>
           <th>产品类型</th>
           <th>有效时间</th>
           <th>产品版本</th>
           <th>总价</th>
         </tr>
         <tr>
           <td>1</td>
           <td>2</td>
           <td>3</td>
           <td>4</td>
           <td>5</td>
         </tr>
       </table>
       <h3 class="buy-dialog-title">请选择银行</h3>
        <bank-chooser @on-change="onChangeBanks"></bank-chooser>
       <div class="button buy-dialog-btn" @click="confirmBuy">
         确认购买
       </div>
       </my-dialog>

       <my-dialog :is-show="isShowErrDialog" @on-close="hideErrDialog">错误弹窗</my-dialog>

       <check-order
       :is-show-check-dialog="isShowCheckOrder"
       :order-id="orderId"
       @on-close-check-dialog="hideCheckOrder"
       ></check-order>
  </div>
</template>

<script>
import VChooser from '../../components/base/choose'
import VSelection from '../../components/base/selection'
import Dialog from '../../components/dialog'
import BankChooser from '../../components/bankChooser'
import CheckOrder from '../../components/checkOrder'
import _ from 'lodash'
    export default {
      components: {
        VChooser,VSelection,MyDialog:Dialog,BankChooser,CheckOrder
      },
            data () {
                return {
                  buyRegion:{},
                  buyType:{},
                  price:0,
                  isShowCheckOrder:null,
                  bankId:null,
                  orderId: null,
                  isShowPayDialog:false,
                  isShowErrDialog:false,
                  buyTypes: [
                      {
                        label: '细化版',
                        value: 0
                      },
                      {
                        label: '合约版',
                        value: 1
                      },
                      {
                        label: '省心版',
                        value: 2
                      }
                    ],
                    districts: [
                      {
                        label: '北京',
                        value: 0
                      },
                      {
                        label: '上海',
                        value: 1
                      },
                      {
                        label: '广州',
                        value: 2
                      },
                      {
                        label: '天津',
                        value: 3
                      },
                      {
                        label: '武汉',
                        value: 4
                      },
                      {
                        label: '重庆',
                        value: 5
                      }
                    ]
                }
            },methods:{
              showPayDialog() {
                 this.isShowPayDialog = true
              },
              hidePayDialog() {
                this.isShowPayDialog = false
              },
              hideErrDialog () {
                this.isShowErrDialog = false
              },
              hideCheckOrder () {
                this.isShowCheckOrder = false
              },
              onChangeBanks (bankObj) {
                 this.bankId=bankObj.id
                  console.log(this.bankId,bankObj)
              },
              confirmBuy () { //购买方式数据发送
                 let reqParams= {
                  buyRegion:this.buyRegion.value,
                  buyType:this.buyType.value,
                  bankId:this.bankId
                 }
                 this.$http.post('/api/createOrder',reqParams)
                 .then((res) => {
                    this.orderId = res.data.orderId
                    console.log(this.orderId)
                    this.isShowCheckOrder = true
                    this.isShowPayDialog = false
                 },(err) => {
                    this.isShowErrDialog = true
                    this.isShowPayDialog = false
                 })
              },
              onParamsChange (attr,val) {
                this[attr]=val
                console.log(attr,this[attr])
                this.getCount()
              },
              getCount(){
                let reqParams={
                  buyRegions: this.buyRegion,
                  buyType: this.buyType
                }
                this.$http.post('/api/getCount',reqParams)
                .then((res) => {
                  let money= res.data.amount
                  console.log(this.buyType)
                 this.price= money*(this.buyType.value+1)
              })}
            },mounted(){
              this.buyRegion= this.buyRegion[0]
              this.buyType.value= 0
              this.getCount()
            }
    }

</script>

<style>

</style>
